<script setup lang="ts">
const {waterForm} = defineProps<{
  waterForm: Object;  // 定义采样时间的类型
}>();
</script>

<template>
  <div class="card">
    <el-card class="box-card">
      <h1 style="text-align: center">水质 红外分光光度法分析原始记录（B面）</h1>
      <div>SXLPHJ/JL/CX-22-65</div>
      <table class="table">
        <tr>
          <td colspan="2" style="text-align: center;">校正系数</td>
          <td colspan="6" style="text-align: center;">
            <div style="display: flex; justify-content: space-around;">
              <div style="display: flex; align-items: center;">
                X=<el-input style="width: 40%; border: 1px solid transparent;"
                 v-model="waterForm.bdatas.x"></el-input>
              </div>
              <div style="display: flex; align-items: center;">
                Y=<el-input style="width: 40%; border: 1px solid transparent;" 
                v-model="waterForm.bdatas.y"></el-input>
              </div>
              <div style="display: flex; align-items: center;">
                Z=<el-input style="width: 40%; border: 1px solid transparent;"
                 v-model="waterForm.bdatas.z"></el-input>
              </div>
              <div style="display: flex; align-items: center;">
                F=<el-input style="width: 40%; border: 1px solid transparent;"
                v-model="waterForm.bdatas.f"></el-input>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td>标准贮备液批号</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.bzzbyph"/>
          </td>
          <td>贮备液浓度(mg/L)</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.zbynd"/>
          </td>
          <td colspan="2">贮备液有效日期</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.zbyyxrq"/>
          </td>
        </tr>
        <tr>
          <td>移取标准贮备液体积（mL）</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.yqbzzbytj"/>
          </td>
          <td>定容体积（mL）</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.drtj1"/>
          </td>
          <td colspan="2">石油类标准使用液浓度(mg/L)</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.sylbzsyynd"/>
          </td>
        </tr>
        <tr>
          <td rowspan="4">四氯乙烯品质检验</td>
          <td>波数</td>
          <td colspan="2">2930cm-1</td>
          <td colspan="2">2960cm-1</td>
          <td colspan="2">3030cm-1</td>
        </tr>
        <tr>
          <td>四氯乙烯吸光度(A)</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.slyxxgd1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.slyxxgd2"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.slyxxgd3"/>
          </td>
        </tr>
        <tr>
          <td>四氯乙烯品质要求</td>
          <td colspan="2">≤0.34</td>
          <td colspan="2">≤0.07</td>
          <td colspan="2">≤0</td>
        </tr>
        <tr>
          <td>是否合格</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.sfhg1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.sfhg2"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bdatas.sfhg3"/>
          </td>
        </tr>
        <tr>
          <td colspan="8" style="text-align: center;">空白检查</td>
        </tr>
        <tr>
          <td colspan="2">样品编号</td>
          <td colspan="2">
            <div style="display:flex;align-items: center;justify-content: center;">
            样品浓度（
            <el-input placeholder="请输入" style="width: 20%;" v-model="waterForm.unit.kb_ypnd"></el-input>
            ）
          </div>
          </td>
          <td colspan="2">质控要求</td>
          <td colspan="2">是否合格</td>
        </tr>
        <tr v-for="(item,index) in waterForm.kbycd" :key="index">
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="item.kb_ypbh"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="item.kb_ypnd"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="item.kb_zkyq"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="item.kb_sfhg"/>
          </td>
        </tr>
        <tr>
          <td colspan="8" style="text-align: center;">校核点测定</td>
        </tr>
        <tr>
          <td>样品编号</td>
          <td>
            <div style="display:flex;align-items: center;justify-content: center;">
            测定结果（
            <el-input placeholder="请输入" style="width: 20%;" v-model="waterForm.unit.jh_cdjg"></el-input>
            ）
          </div>
          </td>
          <td colspan="2">相对( % )</td>
          <td colspan="2">质控要求</td>
          <td colspan="2">是否合格</td>
        </tr>
        <tr v-for="(item,index) in waterForm.bdatas.jhdcd" :key="index">
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="item.ypbh"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="item.cdjg"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="item.xd"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="item.zkyq"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="item.sfhg"/>
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="7">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.bnotes"/>
          </td>
        </tr>
      </table>
    </el-card>
  </div>
</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 12px; /* 单元格内边距 */
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
  text-align: center; /* 表头居中 */
}

.table td{
  width: 5%;
}

.table-td {
  display: flex;
  justify-content: center;
  font-weight:500;
  color: #303133;
}


::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
  flex-direction: row-reverse;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
